iT邦幫忙

vertex shader相關文章
共有 8 則文章

技術 E2 WebGL 畫圓範例:變數的傳遞與處理

引言 接下來,我們來介紹如何用頂點著色器和片段著色器渲染圖形,程式碼的部分,只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時,會用到兩種變數,...

技術 E1 WebGL基礎概念:透過for迴圈探討渲染流程

引言 一直以來,我們在繪圖的時候要不管是用 2D 的 Canvas API 描繪形狀,或是用 3D 的 three.js 的幾何頂點描繪三角形片段,我們都離底層...

鐵人賽 Software Development DAY 30

技術 Day30: WebGL Shader—製作物件的邊框

有時候我們會需要給一個物件邊框。無論是要讓物件在背景中突出、點選物件時有選中的感覺,或是在綠幕上有比較好裁切,物件邊框都能達到我們所需要的需求。 本篇介紹邊框,...

鐵人賽 Software Development DAY 28

技術 Day28: WebGL Shader—透過Shader製作光暈:光暈原理與多種變化形式

Shader是前端視覺特效的重要戰場,而本篇所介紹的shader,不僅只是說明怎麼辦到,還要解釋期原理,並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...

鐵人賽 Software Development DAY 27

技術 Day27: WebGL Shader—透過Shader製作光暈:Shader傳值的原理

本篇內容 vertexNormal 是什麼? 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來?...

鐵人賽 Software Development DAY 25

技術 Day: 25 使用Shader創造漸層

到目前為止,我們都是用three.js製作shader。 但其實three.js並不是唯一的選項,我們的選項其實很多。為了幫助大家順利應用shader在thre...

鐵人賽 Software Development DAY 24

技術 Day24: WebGL Shader——透過自製環境光實作shader傳值

前一篇我們初步修改Shader,並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹: 實作即時變化的環境光 實作即時變化的環境光:回顧...

鐵人賽 Software Development DAY 23

技術 Day23: WebGL Shader——從認識GLSL開始釐清Shader

上一篇,我們用最快的方式,透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣,其球體範圍...